<template>
	<view>
		<ttBar leftIcon="icon-back" bgColor="rgba(0,0,0,0)" color="#ffffff" :showZhanwei="false"></ttBar>
		<view class="bgBox">
			<text class="iconfont icon-yuanxingxuanzhongfill"></text>
			<text>评价成功</text>
		</view>
		<view class="eltBox">
			<text class="tt1">您的满意，是我们永恒的追求</text>
			<view class="ts">
				<text>评价审核中，通过后可获得</text>
				<text>10</text>
				<text>基金</text>
			</view>
			<view class="btnBox">
				<button @tap="toPage" data-url="index">返回首页</button>
				<button @tap="toPage" data-url="myEvaluate">查看评价</button>
			</view>
		</view>
		<view class="rmdList">
			<view class="rmdTitle">
				<image src="../../static/jingxuan.png"></image>
				<text>精选推荐</text>
			</view>
			<goodList :goodData="rmdList"></goodList>
		</view>
	</view>
</template>

<script>
	import goodList from "../../components/goodList/goodList.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components:{goodList},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				isLogin:state=>state.user.isLogin,
				locationCity:state=>state.map.locationCity,
				selectCity:state=>state.map.selectCity,
				roads: state => state.map.roads,
			})
		},
		data() {
			return {
				hasNext:true,
				rmdFilter:{
					page_no:1,
					page_size:10,
					areaId:0
				},
				rmdList: []
			};
		},
		watch:{
			selectCity(newVal){
				this.hasNext=true;
				this.rmdList=[];
				this.rmdFilter={
					page_no:1,
					page_size:10,
					areaId:newVal.cityCode
				};
				this.getRmd();
			}
		},
		methods:{
			getRmd(){
				if(this.hasNext){
					this.rmdFilter.areaId=this.selectCity.cityCode;
					this.rmdFilter.guideCate=uni.getStorageSync("xinqu");
					this.$store.dispatch("apiGetRmdGoodList",this.rmdFilter).then(res=>{
						this.rmdList=this.rmdList.concat(res.data.data.items)
						this.rmdFilter.page_no=res.data.data.nextPage;
						this.hasNext=res.data.data.hasNext
					})
				}else{
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
				
			}
		},
		onLoad() {
			this.getRmd();
		},
		// 页面滚动到底部
		onReachBottom() {
			this.getRmd()
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getRmd()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f7f7f7;
	}
	
	.rmdTitle{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20upx;
		image{
			width: 28upx;
			height: 25upx;
			margin-right: 10upx;
		}
		text{
			font-size: 26upx;	
			color: #d92810;
		}
	}
	.bgBox {
		height: 350upx;
		background: linear-gradient(to right, #ffc713, #ff9f13);
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 135upx;

		text {
			font-size: 38upx;
			color: #FFFFFF;
		}

		.iconfont {
			font-size: 48upx;
			margin-right: 10upx;
		}

	}

	.eltBox {
		height: 330upx;
		margin: -135upx 16upx 20upx 16upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(201, 202, 208, 0.35);
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;

		.tt1 {
			font-size: 40upx;
			font-weight: bold;
			color: #07080d;
			text-align: center;
			margin-top: 64upx;
		}

		.ts {
			font-size: 28upx;
			text-align: center;
			margin-top: 30upx;
			margin-bottom: 50upx;
			color: #202932;

			text:nth-child(2) {
				color: #ff9c00;
				margin: 0 5upx;
			}
		}

		.btnBox {
			display: flex;
			justify-content: center;
			button {
				margin: 0;
				border: none;
				width: 180rpx;
				line-height: 56upx;
				height: 56upx;
				background-image: linear-gradient(0deg,
					#ff8a23 0%,
					#ff9f23 75%,
					#ffb423 100%);
				border-radius: 24upx;
				color: #FFFFFF;
				margin: 0 35upx;
				font-size: 28upx;
			}

			button:after {
				border: none;
				outline: none;
			}
		}
	}
</style>
